<template>
  <view class="page">
    <!-- 日历 -->
    <view class="calendar" @touchstart="handletouchstart" @touchend="handletouchend">
      <picker mode="date" :value="dateYMstr" fields="month" @change="change">
        <view class="calendar-title">{{dateYMstr}}</view>
      </picker>
      <view class="calendar-top">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
      </view>
      <view :animation="animationData">
        <template v-for="(item,index) in calendar">
          <view class="calendar-info" v-show="!calendarMode||index==calendarWeek " :key="index">
            <view v-for="(item1,index1) in item" :key="index1" :class="{'calendar-current':dateDstr==item1&&dateYMstr==new Date().Format('yyyy-MM'),'calendar-active':item1==calendarIndex}" @click="chooseCalendar(item1)">{{item1==0?'':item1}}</view>
          </view>
        </template>
      </view>
      <view class="calendar-more">
        <view></view>
      </view>
    </view>
    <scroll-view class="scroll-y" scroll-y="true">
      <!-- 提醒 -->
      <view class="remind">
        <view class="remind-title">
          <view class="remind-title-text">提醒</view>
          <view @tap="add(3)">
            <uni-icons type="plus-filled" size="30" color="#ED7467"></uni-icons>
          </view>
        </view>
        <view v-for="(item,index) in list" class="remind-item" :key="index">
          <view>
            {{item.warnEventContent}}
          </view>
          <view class="remind-item-icons" @tap="delList(item,index)">
            <uni-icons style="opacity:0.4;" type="minus-filled" size="24" color="#000"></uni-icons>
          </view>
        </view>
      </view>
      <!-- 日程 -->
      <view class="remind">
        <view class="remind-title">
          <view class="remind-title-text">日程</view>
          <view @tap="add(1)">
            <uni-icons type="plus-filled" size="30" color="#ED7467"></uni-icons>
          </view>
        </view>
      </view>
      <view class="list">
        <view v-for="(item,index) in remindList" :class="{'card':true,'sucess':item.warnEventStauts*1}" :key="index" @longpress="check(item)" @tap="checkActive(index)">
          <view v-if="item.warnEventStauts*1" class="sucess-status">完成</view>
          <view :class="{'card-left':true,'active':index==active}">
            <view class="card-left-text1">30</view>
            <view class="card-left-text2">周三</view>
          </view>
          <view class="card-right">
            <view class="card-right-title">{{item.warnEventContent}}</view>
            <view class="card-right-info" v-show="index==active">
              {{item.remark}}
            </view>
            <view class="card-right-time">{{item.warnEventTime}}</view>
          </view>
          <view class="sucess-gou" v-if="!(item.warnEventStauts*1)&&index==active" @tap="delRemindList(item,index)">
            <uni-icons type="checkmarkempty" size="20" color="#fff"></uni-icons>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      triggered: false,
      loading: false,
      /**提醒*/
      list: [
      ],
      /**日程*/
      active: null,
      remindList: [
      ],
      /**日历*/
      dateYMstr: '',
      dateDstr: '',
      curDate: '',
      calendarIndex: '',
      calendarWeek: '',
      calendarMode: true,
      calendar: [
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0]
      ],
      /**滑动事件*/
      lastX: 0,
      lastY: 0,
      animationData: {}
    }
  },
  computed: {
    ...mapGetters('user', {
      userInfo: 'getuserinfo'
    })
  },
  onShow() {
    this.getCalendar()
    this.curDate = new Date().Format('yyyy-MM-dd')
    this.getList()
    this.getRemindList()
  },
  methods: {
    /**长按事件*/
    check(row) {
      const _this = this
      if (row.warnEventStauts * 1) {
        return
      }
      uni.showActionSheet({
        itemList: ['编辑', '删除'],
        success: function (res) {
          if (res.tapIndex === 1) {
            uni.showModal({
              title: '警告',
              content: '本次操作将要该日程',
              success: function (res) {
                if (res.confirm) {
                  _this.$post('/sale/wx/warn_task/delete_data', { id: row.id }, true).then(res => {
                    if (res.code * 1 === 200) {
                      _this.getRemindList()
                      uni.showToast({
                        icon: "none",
                        title: "删除成功",
                        position: "bottom"
                      })
                    }
                  })
                } else if (res.cancel) {
                }
              }
            });
          }
          if (res.tapIndex === 0) {
            uni.setStorage({
              key: 'schedule_key',
              data: row,
              success: function () {
                uni.navigateTo({
                  url: `/pages/schedule/add?type=1`
                });
              }
            });
          }

        },
        fail: function (res) {

        }
      });
    },
    /**更改状态*/
    delList(row, index) {
      const _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将关闭本条提醒',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/warn_task/update_data', {
              id: row.id,
              remark: row.remark,
              warnEventStauts: 1,
              warnTaskType: row.warnTaskType
            }, true).then(res => {
              if (res.code * 1 === 200) {
                uni.showToast({
                  icon: "none",
                  title: "本次提醒关闭",
                  position: "bottom"
                })
                _this.list.splice(index, 1)
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    delRemindList(row, index) {
      const _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将完成本次日程',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/warn_task/update_data', {
              id: row.id,
              remark: row.remark,
              warnEventStauts: 1,
              warnTaskType: row.warnTaskType
            }, true).then(res => {
              if (res.code * 1 === 200) {
                uni.showToast({
                  icon: "none",
                  title: "本次日程已完成",
                  position: "bottom"
                })
                _this.remindList[index].warnEventStauts = 1
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    /**获取提醒和日程*/
    getList() {
      const _this = this;
      _this.$post('/sale/wx/warn_task/get_datas', { warnTaskType: 2, warnEventStauts: 0, warnUserId: _this.userInfo.id }, false).then(res => {
        if (res.code * 1 === 200) {
          _this.list = res.data.row
        }
      })
    },
    getRemindList() {
      const _this = this;
      _this.$post('/sale/wx/warn_task/get_datas', { warnTaskType: 1, warnTime: _this.curDate }, false).then(res => {
        if (res.code * 1 === 200) {
          _this.remindList = res.data.row
        }
      })
    },
    zeroPad(n) {
      return String(n < 10 ? "0" + n : n);
    },
    /**初始化日历相关数据*/
    getCalendar() {
      let _this = this
      let time = new Date();
      let dateArr = [time.getFullYear(), time.getMonth() + 1, time.getDate()];
      _this.dateYMstr = [time.getFullYear(), _this.zeroPad(time.getMonth() + 1)].join('-').toString()
      _this.dateDstr = time.getDate()
      _this.calendarIndex = time.getDate()
      /**获取当前月第几周*/
      _this.calendarWeek = Math.ceil((time.getDate() + 6 - time.getDay()) / 7) - 1
      /**获取当前月对应的最大天数*/
      let maxDayObj = new Date(dateArr[0], dateArr[1], 0);
      let maxDay = maxDayObj.getDate();
      // 获取当前日期第一天对应周几
      let firstDayObj = new Date(dateArr[0], dateArr[1] - 1, 1);
      let firstDay = firstDayObj.getDay();
      firstDay = firstDay == 0 ? 7 : firstDay;
      console.log('本月最大天数', maxDay);
      console.log('获取当前日期第一天对应周', firstDay);
      _this.setCalendar(firstDay, maxDay)

    },
    /**切换年月日*/
    change(event) {
      let _this = this
      _this.dateYMstr = event.detail.value
      _this.calendarIndex = 1
      let dateArr = event.detail.value.split('-')
      let maxDayObj = new Date(dateArr[0], dateArr[1], 0);
      let maxDay = maxDayObj.getDate();
      let firstDayObj = new Date(dateArr[0], dateArr[1] - 1, 1);
      let firstDay = firstDayObj.getDay();
      firstDay = firstDay == 0 ? 7 : firstDay;
      console.log('本月最大天数', maxDay);
      console.log('获取当前日期第一天对应周', firstDay);
      _this.setCalendar(firstDay, maxDay)
    },
    /**生成日历数据*/
    setCalendar(firstDay, maxDay) {
      let _this = this
      _this.calendar = _this.$options.data().calendar
      /**填充空白*/
      let spaceOnce = true;
      let calendarArr = []
      if (firstDay > 0 && spaceOnce) {
        for (var j = 0; j < firstDay; j++) {
          calendarArr.push(0)
        }
        spaceOnce = false;
      }
      for (let a = 1; a <= maxDay; a++) {
        calendarArr.push(a)
      }
      /**往map丽丽填充对应的天数*/
      calendarArr.forEach((item, index) => {
        _this.calendar[Math.floor(index / 7)][index % 7] = item
      })
      /**过滤没有日期的数组*/
      _this.calendar = _this.calendar.filter(res => (!res.every(item => (item === 0))))
      /**拆分所需要的数据*/
      console.log(_this.calendar);
    },
    /**点击日历触发事件*/
    chooseCalendar(item) {
      let _this = this
      _this.calendarIndex = item
      let time = _this.dateYMstr.split('-');
      let curDate = [time[0], time[1], item]
      _this.calendarWeek = Math.ceil((new Date(curDate).getDate() + 6 - new Date(curDate).getDay()) / 7) - 1
      _this.curDate = curDate.join('-').toString()
      _this.getRemindList()
      console.log(_this.curDate);
    },
    /**日程选择*/
    checkActive(index) {
      let _this = this
      if (index === _this.active) {
        _this.active = null
        return
      }
      _this.active = index
    },
    /**添加跳转*/
    add(type) {
      uni.navigateTo({
        url: `/pages/schedule/add?type=${type}`
      });
    },
    /**滑动明事件*/
    handletouchstart(event) {
      console.log(event);
      this.lastX = event.changedTouches[0].clientX;
      this.lastY = event.changedTouches[0].clientY;
    },
    handletouchend(event) {
      console.log(event);
      let currentX = event.changedTouches[0].clientX;
      let currentY = event.changedTouches[0].clientY;
      let tx = currentX - this.lastX;
      let ty = currentY - this.lastY;
      if (Math.abs(tx) > Math.abs(ty)) {
        if (tx < 0) {
          console.log('向左滑动');
          //	this.getList();  //调用列表的方法
        } else if (tx > 0) {
          console.log('向右滑动');
        }
      }
      //上下方向滑动
      else {
        if (ty < 0) {
          console.log('向上滑动');
          let animation = uni.createAnimation({
            duration: 300,
            timingFunction: 'linear',
            delay: 0
          });
          // 导出动画数据传递给data层
          this.animationData = animation.scale(1, 0.8).scale(1, 0.5).height(100).step().scale(1, 1).height(50).step().export();
          setTimeout(() => {
            this.calendarMode = true
          }, 300)
          //	this.getList();  //调用列表的方法
        } else if (ty > 0) {
          let animation = uni.createAnimation({
            duration: 300,
            timingFunction: 'linear',
            delay: 0
          });
          // 导出动画数据传递给data层
          this.animationData = animation.scale(1, 1.2).scale(1, 1.5).height(100).step().scale(1, 1).height('100%').step().export();; //每次执行导出动画时 会覆盖之前的动画
          setTimeout(() => {
            this.calendarMode = false
          }, 300)

          console.log('向下滑动');
        }
      }
    }

  }
}
</script>

<style lang="scss" scope>
.page {
  width: 100%;
  height: 100vh;
  background: #f2f2f2;
  overflow: hidden;
  .icons {
    width: 50px;
    height: 50px;
    z-index: 9999;
  }
}
.scroll-y {
  height: calc(100vh - 122px);
}
.more {
  height: 50px;
}
.list {
  padding: 0px 10px 15px 10px;
}

.card {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  position: relative;
  height: auto;
  .active {
    color: #e74837;
  }
  &-left {
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;
    &-text1 {
      font-size: 20px;
      font-weight: bold;
    }
    &-text2 {
      font-size: 14px;
    }
  }
  &-right {
    flex: 1;
    width: calc(100% - 70px);
    padding: 20px 10px 10px 10px;
    &-title {
      color: #000;
      font-size: 18px;
      font-weight: bold;
      width: 80%;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    &-time {
      // position: absolute;
      // right: 10px;
      // bottom: 20px;
      padding-top: 10px;
      font-size: 12px;
      font-weight: bold;
      color: #96968e;
    }
    &-info {
      font-size: 14px;
      line-height: 22px;
      padding: 5px 0 0px 0;
      word-break: break-all;
    }
  }
}
.sucess {
  background: rgba($color: #4cd964, $alpha: 0.2);
  overflow: hidden;
  &-status {
    position: absolute;
    right: -20px;
    top: -2px;
    font-size: 10px;
    color: #fff;
    background: #4cd964;
    padding: 5px 20px;
    transform: rotate(45deg);
  }
  &-gou {
    width: 26px;
    height: 26px;
    background: #4cd964;
    border-radius: 50%;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
.remind {
  margin: 20px 10px 10px 10px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  &-title {
    padding: 15px 10px;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    justify-content: space-between;
    justify-items: center;
    &-text {
      font-size: 20px;
      font-weight: bold;
      word-break: break-all;
    }
  }
  &-item {
    padding: 15px 10px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    &-icons {
      padding-left: 10px;
    }
  }
  &-item + &-item {
    border-top: 1px solid #f2f2f2;
  }
}
.calendar {
  &-title {
    padding: 10px;
    color: #000;
    font-size: 20px;
  }
  &-top {
    color: #96968e;
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
    view {
      font-size: 12px;
    }
  }
  &-info {
    color: #000;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    view {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-weight: bold;
    }
  }
  &-current {
    color: #5e8af1;
  }
  &-active {
    background: #e74837;
    border-radius: 50%;
    color: #fff;
  }
  &-more {
    padding: 5px 0;
    display: flex;
    justify-content: center;
    view {
      background: #96968e;
      height: 4px;
      width: 120px;
      border-radius: 2px;
    }
  }
}
</style>
